<template>
    <div class="recomTab" @click="jumpPathTo(tabObj.comic_id)">
        <div class="recomTabImg">
            <img :src="tabObj.img" alt="" />
            图片加载中...
        </div>
        <div class="recomTabText">
            <div class="textDetails">
                <div class="title">
                    <h3>{{ tabObj["title"] }}</h3>
                    <span>{{ tabObj["styles"][0].name }}</span>
                </div>

                <div class="bottom">
                    <span>{{ Number(tabObj["sub_title"]) + 1 }}</span>
                    <div class="popularity"><van-icon name="fire" />{{ tabObj["comment_total"] | disposeCount }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["tabObj"],
    filters: {
        disposeCount(value) {
            return (value / 10000).toFixed(2) + "w";
        },
    },
    methods: {
        jumpPathTo(x) {
            this.$router.push({ path: `/details/${x}`, query: { id: x } });
        },
    },
};
</script>

<style lang="scss" scope>
@import url(../static/style/reset.css);
@import "../static/style/variable.scss";

.recomTab {
    margin: $mar-con;
    font-size: $fontSize;
    height: 6.4rem;
    margin-bottom: 0.3733rem;
    .recomTabImg {
        height: 5.1467rem;
        border-radius: 0.2667rem;
        overflow: hidden;
        line-height: 5.1467rem;
        color: pink;
        text-align: center;
        background-color: whitesmoke;
        img {
            width: 100%;
        }
    }
    .recomTabText {
        display: flex;
        justify-content: space-between;
        .textDetails {
            width: 100%;
            .title {
                margin-top: 0.1067rem;
                display: flex;
                align-items: center;
                h3 {
                    color: #212121;
                    font-size: 0.5333rem;
                    max-width: 8rem;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
                span {
                    font-size: 0.32rem;
                    display: block;
                    padding: 4px 2px;
                    color: rgb(144, 149, 155);
                    background: rgba(192, 192, 192, 0.16);
                    text-align: center;
                    margin-left: 0.1067rem;
                    border-radius: 0.1067rem;
                }
            }
            .bottom {
                margin-top: 0.16rem;
                color: #999;
                display: flex;
                justify-content: space-between;
                .van-icon {
                    margin-right: 0.1067rem;
                }
            }
        }
    }
}
</style>
